<template>
  <div>
    <el-card style="margin:20px 0">
      <CategorySelect @getCategoryId="getCategoryId" :cannotshow="scene!=0"></CategorySelect>
    </el-card>
    <!-- 底部由三部分进行切换 -->
    <el-card>
      <!-- 展示SPU列表的结构 -->
      <div v-show="scene==0">
        <el-button type="primary" icon="el-icon-plus" :disabled="!category3Id" @click="addSpu">添加SPU</el-button>
        <el-table border :data="records">
          <el-table-column type="index" label="序号" width="80px" align="center"></el-table-column>
          <el-table-column prop="spuName" label="SPU名称" width="width"></el-table-column>
          <el-table-column prop="description" label="SPU描述" width="width"></el-table-column>
          <el-table-column prop="" label="操作" width="width">
            <template slot-scope="{row,$index}">
              <hint-button type="success" icon="el-icon-plus" size="mini" title="添加SKU" @click="addSku(row)"></hint-button>
              <hint-button type="warning" icon="el-icon-edit" size="mini" title="修改SPU" @click="updateSpu(row)"></hint-button>
              <hint-button type="info" icon="el-icon-info" size="mini" title="查看当前SPU全部SKU列表" @click="handler(row)"></hint-button>
              <el-popconfirm title="这是一段内容确定删除吗？" @onConfirm="deleteSpu(row)">
                <hint-button type="danger" icon="el-icon-delete" size="mini" title="删除SPU" slot="reference"></hint-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination 
          style="margin-top:20px;text-align:center"
          :total="total" 
          :current-page="page" 
          :page-size="limit" 
          :page-sizes="[3,5,10]"
          :pager-count="5"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          layout="prev,pager,next,jumper,->,sizes,total">
        </el-pagination>
      </div>
      <!-- 添加修改SPU -->
      <spu-form v-show="scene==1" @changeScene="changeScene" ref="spuform"></spu-form>
      <!-- 添加SKU -->
      <sku-form v-show="scene==2" ref="sku" @changeScene="changeScenes"></sku-form>
    </el-card>
    <el-dialog :title="`${spu.spuName}的SKU列表`" :visible.sync="dialogTableVisible" :before-close="close">
      <el-table :data="skuList" v-loading="loading">
        <el-table-column prop="skuName" label="名称" width="width"></el-table-column>
        <el-table-column prop="price" label="价格" width="width"></el-table-column>
        <el-table-column prop="weight" label="重量" width="width"></el-table-column>
        <el-table-column label="默认图片">
          <template slot-scope="{row,$index}">
            <img :src="row.skuDefaultImg" alt="" style="width:100px;height:100px">
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import SpuForm from './SpuForm/index.vue'
import SkuForm from './SkuForm/index.vue'
export default {
    name: 'Spu',
    components:{
      SpuForm,
      SkuForm
    },
    data() {
      return {
        category1Id:'',
        category2Id:'',
        category3Id:'',
        page:1,
        limit:3,
        total:0,
        records:[], //spu列表的数据
        scene:0, //0代表展示SPU列表数据，1代表展示添加修改spu，2代表添加sku
        dialogTableVisible:false, //控制对话框显示与隐藏
        spu:{},
        skuList:[],
        loading:true,
      }
    },
    methods: {
      // 三级联动自定义事件，可以把子组件id传递给父组件
      getCategoryId({categoryId,level}){
        if(level==1){
          this.category1Id = categoryId;
          this.category2Id = '';
          this.category3Id = '';
        }else if(level==2){
          this.category2Id = categoryId;
          this.category3Id = '';
        }else{
          this.category3Id = categoryId;
          // 如果有3id，则发请求获取SPU列表数据进行展示
          this.getSpuList();
        }
      },
      // 获取Spu列表数据
      async getSpuList(pager=1){
        this.page = pager;
        const {page,limit,category3Id} = this;
        let result = await this.$API.spu.reqSpuList(page,limit,category3Id);
        if(result.code==200){
          this.total = result.data.total;
          this.records = result.data.records;
        }
      },
      // 点击分页器第几页按钮回调
      handleCurrentChange(page){
        this.page = page;
        this.getSpuList(page);
      },
      // 当分页器某一页条数发生变化回调
      handleSizeChange(limit){
        this.limit = limit;
        this.getSpuList(this.page);
      },
      // 添加spu按钮的回调
      addSpu(){
        this.scene = 1;
        // 通知子组件发请求
        this.$refs.spuform.addSpuData(this.category3Id);
      },
      // 修改某一个spu按钮的回调
      updateSpu(row){
        this.scene = 1;
        // 获取子组件SpuForm,调用子组件方法
        this.$refs.spuform.initSpuData(row);
      },
      // SpuForm自定义事件回调
      changeScene(scene){
        this.scene = scene;
        this.getSpuList();
      },
      // 删除spu回调
      async deleteSpu(row){
        let result = await this.$API.spu.reqDeleteSpu(row.id);
        if(result.code==200){
          this.$message.success('删除成功');
          this.getSpuList(this.records.length>1?this.page:this.page-1);
        }
      },
      // 添加sku按钮的回调
      addSku(row){
        this.scene = 2;
        // 父组件调用子组件的方法，让子组件发请求
        this.$refs.sku.getData(row,this.category1Id,this.category2Id);
      },
      // skuform通知切换场景
      changeScenes(scene){
        this.scene = scene;
      },
      // 查看Sku按钮的回调
      async handler(row){
        this.dialogTableVisible = true;
        // 保存spu信息
        this.spu = row;
        // 发请求获取sku列表信息
        let result = await this.$API.spu.reqSkuList(row.id);
        if(result.code==200){
          this.skuList = result.data;
          this.loading = false;
        }
      },
      // 关闭对话框回调
      close(done){
        this.loading = true;
        this.skuList = [];
        done();
      }
    },
}
</script>

<style>

</style>